﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>百度地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    
    <style type="text/css">
        body, html, #allmap
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=N97p7XZkdbzG794mbzX64VQxXI2HNitW"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>

<script type="text/javascript">
    var map = new BMap.Map("allmap");               // 创建Map实例
    var point = new BMap.Point(114.06455,22.54846 );    // 创建点坐标(经度,纬度)
    map.centerAndZoom(point, 19);                   // 初始化地图,设置中心点坐标和地图大小级别
    map.setZoom(19);

    //{anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(0, 0)}
    map.addControl(new BMap.NavigationControl());   // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());        // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());  // 添加缩略地图控件
    map.addControl(new BMap.MapTypeControl());      // 添加地图类型控件


    map.setCurrentCity("深圳");                     // 设置地图显示的城市
    map.enableScrollWheelZoom();                    // 启用滚轮放大缩小
    map.enableContinuousZoom();                     // 启用地图惯性拖拽，默认禁用

    var menu = new BMap.ContextMenu();
    var txtMenuItem = [
        {
            text:'Show Line',
            callback:function(){
            polyline = new BMap.Polyline(pois,{
                enableEditing: false,//是否启用线编辑，默认为false
                enableClicking: false,//是否响应点击事件，默认为true
                icons:[icons],
                strokeWeight: 5,//折线的宽度，以像素为单位
                strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
                strokeColor:"#18a45b" //折线颜色
            });
            map.addOverlay(polyline);}
        },
        {
            text:'Hide Line',
            callback:function(){map.removeOverlay(polyline);}
        },
        {
            text:'Clear',
            callback:function(){mapclear()}
        }
    ];
    for(var i = 0; i < txtMenuItem.length; i++){
        menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
    }
    map.addContextMenu(menu);

    //BMap_Symbol_SHAPE_CIRCLE  圆形，默认半径为1px
    //BMap_Symbol_SHAPE_RECTANGLE 矩形，默认宽度4px、高度2px
    //BMap_Symbol_SHAPE_RHOMBUS   菱形，默认外接圆半径10px
    //BMap_Symbol_SHAPE_STAR  五角星，五角星外接圆半径为10px
    //BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW 箭头方向向下的闭合箭头
    //BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW  箭头方向向上的闭合箭头
    //BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW   箭头方向向下的非闭合箭头
    //BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW    箭头方向向上的非闭合箭头
    //BMap_Symbol_SHAPE_POINT 定位点图标
    //BMap_Symbol_SHAPE_PLANE 预设的飞机形状
    //BMap_Symbol_SHAPE_CAMERA    预设的照相机形状
    //BMap_Symbol_SHAPE_WARNING   预设的警告符号
    //BMap_Symbol_SHAPE_SMILE 预设的笑脸形状
    //BMap_Symbol_SHAPE_CLOCK 预设的钟表形状

    /*var startIcon = new BMap.Icon("start.png", new BMap.Size(32, 32), {    
                imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
    });

    var endIcon = new BMap.Icon("end.png", new BMap.Size(32, 32), {    
                imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
    });*/

    var startIcon = new BMap.Icon("dir-marker.png", new BMap.Size(25, 34), {    
                imageSize: new BMap.Size(135, 40),
                imageOffset: new BMap.Size(-9, -3)    //图片的偏移量。为了是图片底部中心对准坐标点。
    });

    var endIcon =new BMap.Icon("dir-marker.png", new BMap.Size(25, 34), {    
                imageSize: new BMap.Size(135, 40),
                imageOffset: new BMap.Size(-95, -3)    //图片的偏移量。为了是图片底部中心对准坐标点。
    });
    /*
    var viaIcon = new BMap.Icon("dir-marker.png", new BMap.Size(25, 34), {    
                imageSize: new BMap.Size(135, 40),
                imageOffset: new BMap.Size(-50, -3)    //图片的偏移量。为了是图片底部中心对准坐标点。
    });*/

    
    var turnIcon = new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
        scale: 1,
        strokeWeight: 1,
        rotation: 0,//顺时针旋转0度
        fillColor: 'pink',
        fillOpacity: 1
    });

    var invalidIcon = new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
        scale: 1,
        strokeWeight: 1,
        rotation: 0,//顺时针旋转0度
        fillColor: 'green',
        fillOpacity: 1
    });
    
    var viaIcon = new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
        scale: 1,
        strokeWeight: 1,
        rotation: 0,//顺时针旋转0度
        fillColor: 'blue',
        fillOpacity: 1
    });
    

    var pois = new Array();
    var polyline;
    var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.6,//图标缩放大小
        strokeColor:'#fff',//设置矢量图标的线填充颜色
        strokeWeight: 2//设置线宽
    });
    var icons = new BMap.IconSequence(sy,'80','30');

    var dic = new ActiveXObject("Scripting.Dictionary");
    function setLocationReal(x,y,context,imei){//参数：经纬度,标题
        var point = new BMap.Point(x, y);
        if (dic.Exists(imei))
            dic.Item(imei) = point;
        else
            dic.add(imei, point);

        map.clearOverlays();
        arr = (new VBArray(dic.Keys())).toArray();
        for (var i in arr) {
            var marker = new BMap.Marker(dic(arr[i]),{icon:viaIcon});
            var label = new BMap.Label(arr[i],{offset:new BMap.Size(20,-10)});
            marker.setLabel(label);
            marker.setTitle(context);
            
            map.addOverlay(marker);
            setCenter(x,y);
        }
    }


    function setLocation(x,y,context,turn){//参数：经纬度,标题
        var point = new BMap.Point(x, y);
        pois.push(point);
        var marker;
        if (turn == "TURN") //拐点
        {
            marker = new BMap.Marker(point,{icon:turnIcon});
        }
        else if (turn == "INVALID") //非有效点
        {
            marker = new BMap.Marker(point,{icon:invalidIcon});
        }
        else if (turn == "START") //开始
        {
            marker = new BMap.Marker(point,{icon:startIcon});
        }
        else if (turn == "END") //结束点
        {
            marker = new BMap.Marker(point,{icon:endIcon});
        }
        else //普通点
        {
            marker = new BMap.Marker(point,{icon:viaIcon});
        }
        
        var infoWindow=new BMap.InfoWindow(context,{
            width:100,
            height:50
        });
        

        marker.setTitle(context);
        map.addOverlay(marker);

        var label = new BMap.Label(context, { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);//添加文本信息
        label.setStyle({ display: "none" });
        marker.addEventListener("mouseover",function(){
            //map.openInfoWindow(infoWindow,point);
            label.setStyle({ display: "inline" });
        });
        marker.addEventListener("mouseout", function () {
            label.setStyle({ display: "none" });
        });
    }



    function setCenter(){
        polyline = new BMap.Polyline(pois,{
            enableEditing: false,//是否启用线编辑，默认为false
            enableClicking: false,//是否响应点击事件，默认为true
            icons:[icons],
            strokeWeight: 5,//折线的宽度，以像素为单位
            strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
            strokeColor:"#18a45b" //折线颜色
        });
        map.addOverlay(polyline)
        map.setViewport(pois);
    }

    function mapclear(){
        pois.splice(0, pois.length);
        map.clearOverlays();
    }
    
</script>

